<template>
	<view class="content">
		<view style="width: 90%;margin: 0 auto;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<button data-eventsync="true" open-type="getUserProfile" @tap="denglu"
					style="display: flex;align-items: center;padding: 0;background: transparent;">
					<image v-if="!userInfo.avatarUrl"
						style="border-radius: 50%;width: 120rpx;height: 120rpx;margin-right: 20rpx;"
						src="https://mp-cbdb0ad8-332f-4fef-a987-64c867782ad6.cdn.bspapp.com/58a472de977746f39ff134a52f165d2b~tplv-ke512zj2cu-jpg.jpeg">
					</image>
					<image v-else style="border-radius: 50%;width: 120rpx;height: 120rpx;margin-right: 20rpx;"
						:src="userInfo.avatarUrl"></image>
					<view style="font-size: 36rpx;font-weight: 600;color: #333;">
						{{userInfo.nickName?userInfo.nickName:isuser==1?'默认用户':'请登录'}}</view>
					<view style="font-size: 28rpx;font-weight: 500;color: red;margin-left: 10rpx;">
						{{userInfo.member==1?'钓者':userInfo.member==2?'VIP钓师':userInfo.member>=3?'SVIP钓宗':'钓者'}}</view>
				</button>
				<view style="color: red;font-size: 30rpx;font-weight: 500;flex: 2;text-align: right;">
			<!-- 		<view v-if="userInfo.state==1">已入驻</view>
					<view v-else>未入驻</view> -->
				</view>
			</view>
		<!-- 	<view @click="goposter"
				style="font-size: 28rpx;padding:10rpx 20rpx;border-radius:50rpx 0  0 50rpx;background-color: #000;color: #ffd600;border: 2rpx solid #ffd600;position: relative;width: 168rpx;right: -270px;">
				<view>邀请钓友赚钱</view>
			</view> -->
			<u-notice-bar v-if="isLogin" @click="barshow=true" :text="text1" duration="4000"></u-notice-bar>
			<view v-if="isLogin" style="background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin-top: 20rpx;border: 2rpx solid #66BB6A;">
				<view
					style="display: flex;align-items: center;justify-content: space-between;font-size: 30rpx;font-weight: 600;">
					<view style="display: flex;align-items: center;">
						<view>我的钱包</view>
						<view style="color: red;margin-left: 10rpx;">
							{{userInfo.Withdrawal?userInfo.Withdrawal.toFixed(2):0}}<text
								style="font-size: 24rpx;">元</text></view>
					</view>
					<navigator url="/pages/gotixian/gotixian" style="color: #333;">去提现</navigator>
				</view>
				<view style="display: flex;justify-content: space-between;font-size: 28rpx;margin: 20rpx 0;">
					<view v-for="(i,en) in list" :key="en" :class="{ative:index==en}" @click="btn(en)"
						style="width: 320rpx;text-align: center;padding: 10rpx;">
						<view>{{i.text}}</view>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;font-size: 28rpx;">
					<view v-for="(i,en) in list1" :key="en"
						style="width: 320rpx;display: flex;align-items: center;flex-direction: column;">
						<view style="color: red;font-weight: 500;" v-if="en==0">{{i.price}}</view>
						<view style="color: red;font-weight: 500;" v-else>{{i.price?i.price.toFixed(2):0}}</view>
						<view style="margin-top: 10rpx;">{{i.text}}</view>
					</view>
				</view>
			</view>
			<view v-else
				style="background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin-top: 20rpx; filter: blur(2px);border: 2rpx solid #66BB6A;">
				<view
					style="display: flex;align-items: center;justify-content: space-between;font-size: 30rpx;font-weight: 600;">
					<view style="display: flex;align-items: center;">
						<view>我的钱包</view>
						<view style="color: red;margin-left: 10rpx;">0<text style="font-size: 24rpx;">元</text></view>
					</view>
					<view url="/pages/gotixian/gotixian" style="color: #333;">去提现</view>
				</view>
				<view style="display: flex;justify-content: space-between;font-size: 28rpx;margin: 20rpx 0;">
					<view v-for="(i,en) in list" :key="en" :class="{ative:index==en}"
						style="width: 320rpx;text-align: center;padding: 10rpx;">
						<view>{{i.text}}</view>
					</view>
				</view>
				<view style="display: flex;justify-content: space-between;font-size: 28rpx;">
					<view v-for="(i,en) in list1" :key="en"
						style="width: 320rpx;display: flex;align-items: center;flex-direction: column;">
						<view style="color: red;font-weight: 500;">{{i.price}}元</view>
						<view style="margin-top: 10rpx;">{{i.text}}</view>
					</view>
				</view>
			</view>
			<view v-if="isLogin" style="background-color: #fff;border-radius: 20rpx;padding: 20rpx;margin-top: 20rpx;">
				<navigator url="/pages/tixian/tixian"
					style="padding: 0 14px;background-color: #fff;display: flex;align-items: center;height: 100rpx;line-height: 100rpx;font-size: 28rpx;font-weight: 500;">
					<view style="display: flex;align-items: center; justify-content: space-between; width: 600rpx;">
						<text>提现设置</text>
						<image src="../../static/tixian.png" style="width: 40rpx;height: 40rpx;"></image>
					</view>
				</navigator>
		<!-- 		<navigator url="/pages/ruzhus/ruzhus"
					style="padding: 0 14px;background-color: #fff;display: flex;align-items: center;height: 100rpx;line-height: 100rpx;font-size: 28rpx;font-weight: 500;">
					<view style="display: flex;align-items: center; justify-content: space-between; width: 600rpx;">
						<text>入驻足迹圈</text>
						<image src="../../static/ruzhu.png" style="width: 40rpx;height: 40rpx;"></image>
					</view>
				</navigator> -->
<!-- 				<navigator v-if="isLogin && userInfo.state && userInfo.state==1" url="/pages/distribution/distribution"
					style="padding: 0 14px;background-color: #fff;display: flex;align-items: center;height: 100rpx;line-height: 100rpx;font-size: 28rpx;font-weight: 500;">
					邀请博主
				</navigator> -->
				<!--  <button @click="notoken" style="background-color: #fff;display: flex;align-items: center;height: 100rpx;line-height: 100rpx;font-size: 28rpx;font-weight: 500;">
		  			  清除
		  </button> -->
<!-- 				<button open-type="openAwemeUserProfile" :data-aweme-id="dyid"
					style="background-color: #fff;display: flex;align-items: center;height: 100rpx;line-height: 100rpx;font-size: 28rpx;font-weight: 500;">
					<view style="display: flex;align-items: center; justify-content: space-between; width: 600rpx;">
						<text>联系客服</text>
						<image src="../../static/kefu.png" style="width: 40rpx;height: 40rpx;"></image>
					</view>
				</button> -->
				<!-- <button open-type="uploadDouyinVideo" id="1" data-hello="world" style="background-color: #fff;display: flex;align-items: center;height: 100rpx;line-height: 100rpx;font-size: 28rpx;font-weight: 500;">
		  			  测试
		  </button> -->
				<!-- <button open-type="addShortcut" @click="eventHandler" style="background-color: #fff;display: flex;align-items: center;height: 100rpx;line-height: 100rpx;font-size: 28rpx;font-weight: 500;">
		  			  增加到桌面
		  </button> -->
			</view>
			<u-popup :show="barshow" @close="barshow=false" mode="center" round="20rpx">
				<view style="width: 480rpx;height: 480rpx;">
					<view style="padding: 40rpx;font-size: 28rpx;">{{text1}}</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				title: 'Hello',
				// userInfo:{},
				index: 0,
				text1: '',
				barshow: false,
				list: [{
						id: 0,
						text: '昨日'
					},
					{
						id: 1,
						text: '全部'
					}
				],
				list1: [{
						id: 0,
						text: '完播',
						price: 0
					},
					{
						id: 1,
						text: '广告收益',
						price: 0
					},
					{
						id: 2,
						text: '总收益',
						price: 0
					}
				],
				list2: [{
						id: 1,
						text: '提现设置'
					},
					{
						id: 2,
						text: '入驻钓点雷达'
					},
					{
						id: 3,
						text: '直播挂载入驻'
					},
					{
						id: 4,
						text: '帮助中心'
					},
					{
						id: 5,
						text: '联系客服'
					},
					{
						id: 6,
						text: '增加到桌面'
					}
				],
				dyid: '',
				ishsow: false,
				isuser: 0,
				ivcode: ""
			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo']),
		},
		// async onUploadDouyinVideo(uploadOptions) {
		//   // 通过 uploadOptions 可以拿到 button target 上的一些信息
		//   // 如这里的 demo 可以拿到 id: "1"，hello: "world"
		//   console.log("onUploadDouyinVideoOptions: ", uploadOptions);

		//   // 可以利用异步能力配合其他 API 获取必要的字段信息
		//   const videoPath = await this.chooseVideo();
		//   console.log("videoPath:", videoPath);
		//   // 返回值（文档中称之为 uploadParams）将被当作发布参数传入视频发布器，发布视频
		//   return {
		//       videoPath,
		//       extra: {
		//          anchor: {
		//            anchorType: "app",
		//            title: "查看此位置",
		//            path: "page/map/map",
		//          },
		//     },
		//     success: function (callback) {
		//       // 只有当发布成功且挂载成功时，success callback 才会有 videoId
		//       console.log("success: ", callback);
		//     },
		//     fail: function (callback) {
		//       console.log("fail: ", callback);
		//     },
		//     complete: function (callback) {
		//       console.log("complete: ", callback);
		//     },
		//   };
		// },
		onShow() {
			this.getUser()
			this.btn()
		},
		onLoad(option) {
			if (option.ivcode) {
				this.ivcode = option.ivcode
			}
			this.getbiao()
		},
		methods: {
			...mapMutations(['Login']),
			chooseVideo() {
				return new Promise((resolve) => {
					tt.chooseVideo({
						sourceType: ["album", "camera"],
						compressed: true,
						success: (res) => {
							resolve(res.tempFilePath);
						},
						fail: (err) => {
							let errType = err.errMsg.includes("chooseVideo:fail cancel") ?
								"取消选择" :
								"选择失败";
							tt.showModal({
								title: errType,
								content: err.errMsg,
								showCancel: false,
							});
							resolve("");
						},
					});
				});
			},
			async btn(index) {
				this.index = index
				const {
					data: res
				} = await this.$http.post('/nav/getsum', {
					index: this.index
				})
				if (res.errCode == 200) {
					this.list1[0].price = res.data.sum
					this.list1[1].price = res.data.Withdrawal
					this.list1[2].price = res.data.Withdrawal
				}
			},
			async getbiao() {
				const {
					data: res
				} = await this.$http.post('/nav/getbiao', {})
				if (res.errCode == 200) {
					this.text1 = res.data.explains
					this.dyid = res.data.advertisement
				}
			},
			goposter() {
				uni.navigateTo({
					url: '/pages/poster/poster'
				})
			},
			eventHandler(e) {
				if (e.detail.errNo) {
					console.log("添加到桌面失败", e.detail);
				} else {
					console.log("添加到桌面成功");
				}
			},
			notoken() {
				uni.setStorageSync('token', null)
				this.getUser()
			},
			dylogin() {
				tt.showLoading({
					title: '登录中...',
				})
				tt.login({
					force: true,
					success: async (res) => {
						let datas = {
							code: res.code,
							anonymous_code: res.anonymousCode
						}
						if (this.ivcode) {
							datas.myivcode = this.ivcode
						}
						const {
							data: resl
						} = await this.$http.post('/login', datas)
						if (resl.errCode == 200) {
							tt.hideLoading()
							uni.setStorageSync('token', resl.data)
							this.updateUser()
							this.getbiao()
							// this.getUser()
						}
					},
					fail(res) {
						console.log(`login 调用失败`);
					},
				})
			},
			// 授权获取用户头像和名称
			denglu() {
				uni.getUserProfile({
					force: true,
					success: (res) => {
						this.Login(res.userInfo)
						this.dylogin()

					},
					fail(res) {
						console.log("getUserProfile 调用失败", res);
					},
				})

			},
			async getUser() {
				const {
					data: res
				} = await this.$http.post('/nav/getUser', {})
				if (res.errCode == 200) {
					this.Login(res.data)
					uni.setStorageSync('userInfo', res.data)
				}

			},
			async updateUser() {
				const {
					data: res
				} = await this.$http.post('/nav/updateUser', {
					avatarUrl: this.userInfo.avatarUrl,
					nickName: this.userInfo.nickName
				})
				if (res.errCode == 200) {
					this.getUser()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ative {
		background-color: #66BB6A;
	}

	button::after {
		border: none; //去除边框
	}

	.content {
		width: 100vw;
		height: 100vh;
	}
</style>